
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from "mobx";
import { Menu, Button, Input, message, Modal, Checkbox, Pagination } from 'antd'
import '../assets/less/standard_face_database.less'
import { base64_to_str, picture_lazy_load, str_to_base64 } from '../utils/utils'
import $ from 'jquery'
import Right_part from '../components/standard_face_database/right_part'
@inject("standard_face_database_store")
@inject("AdminStore")
@observer
export default class componentName extends Component {
    constructor(props) {
        super(props);
        this.state = {
            per_page: 27,//每页展示多少个数据
            page: 0,//当前在第几页
            total_pages: 10,
            newFaceStoreList: [],
            new_face_store_visible: false,//新建人脸库弹出框
            face_databse_input: undefined,
            face_databse_input_value: undefined
        }

    }
    componentDidMount = async () => {
        await this.props.standard_face_database_store.get_face_database(this.props.AdminStore.token); //获取所有的特征库
        $('#menu0').click() //选中第0个数据
    }
    render() {
        return (
            <React.Fragment>
                <div className="ren_ti_jian_suo_wrapper">

                    <div className="ren_ti_jian_suo_left">
                        <div className="new_faceStore_four_parts">
                            <Menu
                                mode="inline"
                                style={{ width: "100%" }}
                            >
                                {
                                    this.props.standard_face_database_store.newFaceStoreList.map((item, index) => {
                                        return (
                                            <Menu.Item className={`menu_item ${base64_to_str(item)}`} id={`menu${index}`} key={index}
                                                onClick={async () => {
                                                    await this.props.standard_face_database_store.get_face_store_information(item, this.state.per_page, this.props.AdminStore.token)//获取人脸库信息
                                                    await this.props.standard_face_database_store.choose_this_database(item) //设置当前选中为这个库
                                                    await this.props.standard_face_database_store.change_load_face_img(true)
                                                    picture_lazy_load('human_body_management_ul', 'ren_ti_jian_suo_right_ul_li_img', 218)
                                                }
                                                }
                                            >{base64_to_str(item)}
                                                <div className="new_faceStore_fourPartsA_lineB"></div>
                                            </Menu.Item>
                                        )
                                    })

                                }
                            </Menu>
                        </div>

                        <div className="button_wrap" >
                            <Button
                                onClick={() => {
                                    if (this.props.standard_face_database_store.newFaceStoreList.length >= 4) {
                                        message.info("最多只能创建四个人脸库");
                                    } else {
                                        this.setState((prevState) => ({
                                            face_databse_input_value: '',
                                            new_face_store_visible: true
                                        }))
                                    }
                                }}
                            >新建人脸库</Button>
                            <Button
                                className="new_faceStore_btn_del"
                                id="new_faceStore_btn_del"
                                disabled={this.props.standard_face_database_store.newFaceStoreList.length > 0 ? false : true}
                                onClick={async () => {
                                    await this.props.standard_face_database_store.del_faceStore_name(
                                        this.props.standard_face_database_store.nowChoseWhichFaceStore, this.props.AdminStore.token
                                    );
                                }}
                            >删除人脸库</Button>
                        </div>
                    </div>
                    <div className="ren_ti_jian_suo_right">
                        <Right_part />
                    </div>
                </div>
                {/* 新建人脸库弹框 */}
                <Modal
                    title="新建人脸库"
                    centered="true"
                    okText="确认"
                    cancelText="取消"
                    wrapClassName="new_face_store_modal_wrap"
                    visible={this.state.new_face_store_visible}
                    onOk={async () => {
                        const save_face_store_result = await this.save_face_store(
                            this.state.face_databse_input,
                            this.props.standard_face_database_store.newFaceStoreList
                        );
                        if (save_face_store_result == 'success') {
                            this.setState((prevState) => ({
                                new_face_store_visible: false
                            }), () => {
                                let that = this
                                console.log('选中这个库', that.state.face_databse_input)
                                $((function () {
                                    $(`.${that.state.face_databse_input}`).click()//新建之后默认选中这个库
                                }))

                            })
                        } else {

                        }
                    }}
                    onCancel={() => {
                        this.setState((prevState) => ({
                            new_face_store_visible: false
                        }))
                    }}
                >
                    <div className="new_face_store_modal_wrap_left_line"></div>
                    <div className="new_faceStore_toast_p_new_faceStore_toast_input_wrap">
                        <div className="p">人脸库名称:</div>
                        <Input
                            className="new_faceStore_toast_input"
                            placeholder="最多7个字符"
                            value={this.state.face_databse_input_value}
                            onChange={(e) => {
                                let value = e.target.value
                                this.setState((prevState) => ({
                                    face_databse_input_value: value
                                }))
                            }}
                            onBlur={(e) => {
                                let value = e.target.value
                                this.setState((prevState) => ({
                                    face_databse_input: value
                                }))
                            }}
                        />
                    </div>
                </Modal>

            </React.Fragment >
        );
    }

    save_face_store = async (face_databse_input) => {
        let result = undefined;
        if (face_databse_input.length > 7) {
            message.info('不允许超过7个字符')
        } else if (face_databse_input === "") {
            message.info("不能为空请输入人脸库名称");
        } else {
            result = await this.props.standard_face_database_store.save_face_store(face_databse_input, this.props.AdminStore.token)
        }
        return result
    }

}
